<script lang="ts" setup>
// FluentUI components are registered in main.ts
import type {
  TreeItemAppearance,
  TreeItemSize,
} from '@fluentui/web-components';

withDefaults(
  defineProps<{
    /**
     * The appearance variants of the tree item element
     */
    appearance?: TreeItemAppearance;
    /**
     * The size of the tree item element
     */
    size?: TreeItemSize;
  }>(),
  {
    appearance: 'subtle',
    size: 'small',
  },
);

// Define emits for events that bubble up from the tree
const emit = defineEmits<{
  blur: [event: FocusEvent];
  change: [event: Event];
  click: [event: MouseEvent];
  focus: [event: FocusEvent];
  keydown: [event: KeyboardEvent];
}>();

const handleClick = (event: MouseEvent) => {
  emit('click', event);
};

const handleKeydown = (event: KeyboardEvent) => {
  emit('keydown', event);
};

const handleChange = (event: Event) => {
  emit('change', event);
};

const handleFocus = (event: FocusEvent) => {
  emit('focus', event);
};

const handleBlur = (event: FocusEvent) => {
  emit('blur', event);
};
</script>

<template>
  <fluent-tree
    :appearance="appearance"
    :size="size"
    @click="handleClick"
    @keydown="handleKeydown"
    @change="handleChange"
    @focus="handleFocus"
    @blur="handleBlur"
  >
    <slot></slot>
  </fluent-tree>
</template>

<style scoped></style>
